<template>
  <div class="post">
    <a-list
      class="list-demo-action-layout"
      :bordered="false"
      :data="props.postList"
      :pagination-props="paginationProps"
      :gridProps="{ gutter: 0, span: 6 }"
    >
      <template #item="{ item }">
        <a-list-item class="list-demo-item" action-layout="vertical">
          <a-card :style="{ width: '360px' }" :title="item.title" hoverable>
            <template #extra>
              <div v-html="item.author"></div>
            </template>
            <div v-html="item.content"></div>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, defineProps, watch } from "vue";
import { ref } from "vue";
import message from "@arco-design/web-vue/es/message";

const pageSize = ref(20);
const current = ref(1);

const paginationProps = ref({
  defaultPageSize: 15,
  total: 10,
});

watch(pageSize, () => {
  console.log("pageSize", pageSize.value);
});

watch(current, () => {
  console.log("current", current.value);
});

interface Props {
  postList: any[];
}

const props = withDefaults(defineProps<Props>(), {
  postList: () => [],
});
</script>

<style></style>
